<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="/static/index/css/login.css" />
    <script type="text/javascript" src="/static/js/jquery.js"></script>
</head>

<body class="login">
    <div class="login_m">
        <div class="login_logo">
            <h2>登录</h2>
        </div>
        <div class="login_boder">
            <div class="login_padding" id="login_model">
                <form id="login_form" action="index" method="POST">
                    <input type="hidden" name="from" value="{$from}">
                    <div class="username">
                        <h2>USERNAME</h2>
                        <label>
                            <input type="text" id="username" name="username" class="txt_input" placeholder="your username">
                        </label>
                        <span class="uspan"></span>
                    </div>
                    <div class="password">
                        <h2>PASSWORD</h2>
                        <label>
                            <input type="password" id="userpwd" name="password" class="txt_input" placeholder="the password">
                        </label>
                        <span class="pspan"></span>
                    </div>
                    <div class="verify">
                        <h2>CAPTCHA </h2>
                        <label>
                            <input type="text" id="verify" name="verify" class="verify_input" placeholder="the captcha" onkeydown="KeyDown()">
                            <img src="{:captcha_src()}" class="verify_img" width="120px" height="40px" onclick="this.src='{:captcha_src()}?tmp='+Math.random()">
                        </label>
                        <label>
                            <span class="vspan"></span>
                        </label>
                    </div>
                    <div class="forgot_password">
                        <h2>
                            <a href="javascript:void(0);" onclick="getPwd();">Forgot your password?</a>
                        </h2>
                        <label>
                            <span class="fspan"></span>
                        </label>
                    </div>
                    <div class="button">
                        <label>
                            <a href="javascript:void(0);" id="button" class="sub_button">登&nbsp;陆</a>
                            <!-- <input type="submit" class="sub_button"  id="button" value="登陆" style="opacity: 0.7;"> -->
                        </label>
                    </div>
                </form>
            </div>
            <!--login_padding  Sign up end-->
        </div>
        <!--login_boder end-->
        <div class="copyrights">Collect from
            <a href="#">huwhois@163.com</a>
        </div>
    </div>
    <!--login_m end-->

    <script type="text/javascript">
        $(function () {
            var issubmit = true;

            $('#button').css('opacity', 0.7).hover(function () {
                $(this).stop().fadeTo(650, 1);
            }, function () {
                $(this).stop().fadeTo(650, 0.7);
            });

            function checkEmpty(data, holder, msg) {
                if (data.length <= 0) {
                    $(holder).html(msg);
                    return false;
                } else {
                    $(holder).html('');
                    return true;
                }
            }

            $("#username").blur(function () {
                var uname = $(this).val();
                // console.log(uname);
                issubmit = checkEmpty(uname, '.uspan', '* 用户名不能为空');
            });

            $("#userpwd").blur(function () {
                var upwd = $(this).val();
                issubmit = checkEmpty(upwd, '.pspan', '* 密码不能为空');
            });

            $("#button").click(function () {
                var uname = $("#username").val();
                var upwd = $("#userpwd").val();
                var verify = $("#verify").val();

                issubmit = checkEmpty(uname, '.uspan', '* 用户名不能为空');
                if (!issubmit) return false;
                issubmit = checkEmpty(upwd, '.pspan', '* 密码不能为空');
                if (!issubmit) return false;
                issubmit = checkEmpty(verify, '.cspan', '* 验证不能为空');
                if (!issubmit) return false;
                
                $("#login_form").submit();
            });
        });

        function KeyDown() {
            if (event.keyCode == 13) {
                event.returnValue = false;
                event.cancel = true;
                $("#button").click();
            }
        }

        function getPwd() {
            $('.fspan').html("* 请联系网站管理员");
        }
    </script>

</body>

</html>